<template>
    <view class="sh-title-card mb10">
        <view class="title-box">
            <image class="title-bg" :src="detail.image" mode="aspectFill"></image>
            <view class="title-text" :style="{ color: detail.color }">{{ detail.name }}</view>
        </view>

        <button class="padding flex align-center justify-center cu-btn " style="font-weight: bold;color: #f10c0c;font-size: 17px;" @click="xxx">点击关注公众号 , 购买商品</button>
        <view class="cu-modal" :class="{ show: showModal }" cathctouchmove @tap="hideModal" v-if="showModal">
            <view class="cu-dialog" @tap.stop style="background: none;overflow: visible;">
                <view class="img-box">
                    <view class="img-wrap"><image class="modal-img" :src="template[0].content.list[0].image" mode="widthFix" @tap="saveImage(modalImg)"></image></view>
                    <text class="cuIcon-roundclose" @tap="hideModal"></text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * 组件标题栏
 * @property {Object} detail - 各个卡片标题栏
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
    components: {},
    data() {
        return {
            showModal: false,
        };
    },
    computed: {
        ...mapState({
            template: state => state.init.templateData['float-button'],
        }),
    },
    props: {
        detail: {
            type: Object,
            default: null,
        },
    },
    methods: {
        xxx() {
            this.showModal = true;
            console.log('template: ', this.template[0].content.list[0].image);
        },
        hideModal() {
            this.showModal = false;
        },
        // 保存图片
        async saveImage(path) {
            let that = this;
            let platform = uni.getStorageSync('platform');
            let checkPermission = await that.$tools.checkAppAlbum();
            if (platform === 'wxOfficialAccount') {
                that.$tools.toast('长按图片保存');
            } else if (checkPermission) {
                uni.saveImageToPhotosAlbum({
                    filePath: path,
                    success: res => {
                        that.$tools.toast('保存成功');
                    },
                    fail: err => {
                        that.$tools.toast('保存失败');
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss">
.sh-title-card {
    width: 750rpx;
}
.title-box {
    width: 710rpx;
    height: 88rpx;
    margin: 0 auto;
    position: relative;
    border-radius: 30rpx;

    .title-bg {
        width: 100%;
        height: 100%;
    }
    .title-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;
    }
}
</style>
